<template>
<div class="ratingselect" >
    <div class="rating-type border-1px">
        <span @click="select(2,$event)" class="block positive" :class="{'active':selectType === 2}">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
        <span @click="select(0,$event)" class="block positive" :class="{'active':selectType === 0}">{{desc.positive}}<span class="count">{{positive.length}}</span></span>
        <span @click="select(1,$event)" class="block negative" :class="{'active':selectType === 1}">{{desc.negative}}<span class="count">{{negative.length}}</span></span>
    </div>
    <div class="switch" 
        :class="{'on':onlyContent === true}"
        @click="toggleContent"
    >
        <span class="icon-check_circle"></span>
        <span class="text">只看有内容的评价</span>
    </div>
</div> 
</template>
<script>
const POSITIVE = 0;//积极
const NEGATIVE = 1;//负面
const ALL = 2;//全部
export default {
  name: 'ratingselect',
  props:{
    ratings:{
        type:Array,
        default(){
            return [];
        }
    },
    selectType:{
        type:Number,
        default:ALL
    },
    onlyContent:{
        type:Boolean,
        default:false
    },
    desc:{
        type:Object,
        default() {
            return {
                all:"全部",
                positive:"满意",
                negative:"不满意" 
            }  
        }
    }
  },
  computed:{
    positive(){
        return this.ratings.filter(function(rating) {
            return rating.rateType === POSITIVE
        });
    },
    negative(){
        return this.ratings.filter(function(rating) {
            return rating.rateType === NEGATIVE
        });
    }
  },
  methods:{ 
    select(type,event){
        if (!event._constructed) {//为什么有event，因为better-scroll点击事件和pc自带的重用
          return;
        }
        //这种情况下就会报这个错，因为传入的prop中的值是不允许改变的,在vue2中，直接修改prop是被视作反模式的。
        //this.selectType = type//这里修改的，并没有使父组件也改变
        //this.$emit("select",type)//告诉父组件
        //应该这个组件提交个事件给父组件,如果变量发生改变就emit事件，所以这里压根不需要 prop。
        this.$emit("select",type)
    },
    toggleContent(){
        if (!event._constructed) {
          return;
        }
        //this.onlyContent = !this.onlyContent//这里修改的，并没有使父组件也改变
        //this.$emit("toggle",this.onlyContent)//告诉父组件
        this.$emit("toggle",!this.onlyContent)
    }

  }



}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped >
@import '../../common/stylus/mixin.styl'
.ratingselect
    .rating-type
        padding: 18px 0
        margin: 0 18px
        border-1px(rgba(7, 17, 27, .1))
        font-size: 0
        .block
            display: inline-block
            padding: 8px 12px
            margin-right: 8px
            line-height: 16px
            border-radius: 1px
            font-size: 12px
            color: rgb(77, 85, 93)
            &.active
                color:#fff
            .count
                margin-left: 2px
                font-size: 8px
            &.positive
                background: rgba(0, 160, 220, .2)
                &.active
                    background: rgb(0, 160, 220)
            &.negative
                background: rgba(77, 85, 93, .2)
                &.active
                    background: rgb(77, 85, 93)
    .switch
        padding: 12px 18px
        line-height: 24px
        border-bottom: 1px solid rgba(7, 17, 27, .1)
        color: rgb(147, 153, 159)
        font-size: 0  
        &.on
            .icon-check_circle
                color: #00c850         
        .icon-check_circle
            display: inline-block
            vertical-align: top
            margin-right: 4px
            font-size: 24px
        .text
            display: inline-block
            vertical-align: top
            font-size: 12px        
            

</style>
